<template>
    <div class="attr">
        <Category :screen="screen"></Category>
        <el-card>
            <div v-show="screen == 0">
                <el-button type="primary" icon="Plus" :disabled="CategoryStore.category3Id ? false : true"
                    @click="addAttrInfo">
                    添加平台属性
                </el-button>
                <el-table :data="AttrInfoList" style="width: 100%;margin-top: 15px;" border>
                    <el-table-column type="index" align="center" label="序号" width="100" />
                    <el-table-column prop="attrName" label="属性名称" width="180" />
                    <el-table-column label="属性值名称">
                        <template #default="scope">
                            <el-tag type="primary" v-for="item in scope.row.attrValueList" :key="item.attrId"
                                style="margin: 0 5px">{{
                                    item.valueName
                                }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <el-button type="warning" icon="Edit" size="small"
                                @click="editAttrInfo(scope.row)"></el-button>
                            <el-button type="danger" icon="Delete" size="small"
                                @click="deleteAttr(scope.row.id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-show="screen == 1">
                <el-form :model="attrInfo">
                    <el-form-item label="属性名称">
                        <el-input placeholder="请您输入属性的名称" style="width: 240px"
                            v-model.trim="attrInfo.attrName"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" icon="Plus" @click="addAttrValu"
                    :disabled="!attrInfo.attrName">添加属性值</el-button>
                <el-button>取消</el-button>
                <el-table border style="margin: 10px 0;" :data="attrInfo.attrValueList">
                    <el-table-column label="序号" type="index" align="center" width="120"></el-table-column>
                    <el-table-column label="属性值">
                        <template #default="scope">
                            <el-input v-if="scope.row.showInput == 1" @blur="lackFocus(scope.row, scope.$index)"
                                v-model="scope.row.valueName" placeholder="请你输入属性值名称"
                                :ref="(vc: any) => inputArr[scope.$index] = vc"></el-input>
                            <div v-else @click="showText(scope.row, scope.$index)">{{ scope.row.valueName }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="danger" icon="Delete" size="small"
                                @click="deleteAttrValue(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <el-button type="primary" @click="saveAttrInfo"
                    :disabled="attrInfo.attrValueList.length == 0">保存</el-button>
                <el-button @click="canaelUpdateAttrInfo">取消</el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref, watch } from 'vue'
import useCategoryStore from '@/stores/category';
import { reqAttrInfoList, reqAddOrUpdateAttr, reqDeleteAttr } from '@/api/product/attr/index'
import type { attrValueList } from '@/api/product/attr/type'
import { ElMessage } from 'element-plus';
const CategoryStore = useCategoryStore()
const AttrInfoList = ref<attrValueList>([])
const screen = ref(0)
const inputArr = ref<any>([])
const attrInfo = reactive<any>({
    attrName: "",
    attrValueList: [],
    categoryId: '',
    categoryLevel: 3,
})
watch(() => CategoryStore.category3Id, () => {
    if (CategoryStore.category3Id) {
        getAttrInfoList()
    } else {
        AttrInfoList.value = []
    }

})
const getAttrInfoList = async () => {
    const res = await reqAttrInfoList(CategoryStore.category1Id, CategoryStore.category2Id, CategoryStore.category3Id)
    if (res.code == 200) {
        AttrInfoList.value = res.data
    }

}
const addAttrInfo = () => {
    screen.value = 1
    Object.assign(attrInfo, {
        attrName: "",
        attrValueList: [],
        categoryId: '',
        categoryLevel: 3,
        id: ''
    })
}
const editAttrInfo = async (row: any) => {
    screen.value = 1
    Object.assign(attrInfo, JSON.parse(JSON.stringify(row)))
}
const deleteAttr = async (id: number) => {
    const res: any = await reqDeleteAttr(id)
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
        getAttrInfoList()
    }

}
const canaelUpdateAttrInfo = () => {
    screen.value = 0
}
const deleteAttrValue = (index: number) => {
    attrInfo.attrValueList.splice(index, 1)
}
const addAttrValu = () => {
    const forbidAdd = attrInfo.attrValueList.find((item: any) => {
        return item.valueName == ''
    })
    if (forbidAdd) {
        return
    }
    attrInfo.attrValueList.push({
        valueName: '',
        showInput: 1
    })
    nextTick(() => {
        inputArr.value[inputArr.value.length - 1].focus()
    })
}
const saveAttrInfo = async () => {
    attrInfo.categoryId = CategoryStore.category3Id
    const saveFaile = attrInfo.attrValueList.find((item: any) => {
        if (item.valueName == '') {
            return true
        } else {
            return false
        }
    })
    if (saveFaile) {
        ElMessage({
            type: 'warning',
            message: '属性值不能为空'
        })
        return
    }
    const res = await reqAddOrUpdateAttr(attrInfo)
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: attrInfo.id ? '修改成功' : '添加成功'
        })
        screen.value = 0
        getAttrInfoList()
    } else {
        ElMessage({
            type: 'error',
            message: attrInfo.id ? '修改失败' : '添加失败'
        })
    }
}
const lackFocus = (row: any, index: number) => {
    if (row.valueName == '') {
        ElMessage({
            type: 'warning',
            message: '属性值不能为空'
        })
        attrInfo.attrValueList.splice(index, 1)
        return
    }
    const repeat = attrInfo.attrValueList.some((item: any) => {
        if (item !== row) {
            return item.valueName == row.valueName
        }
    })
    if (repeat) {
        ElMessage({
            type: 'warning',
            message: '属性值重复'
        })
        return
    }
    row.showInput = 0
}
const showText = (row: any, index: number) => {
    row.showInput = 1
    nextTick(() => {
        inputArr.value[index].focus()
    })

}

</script>

<style lang="scss" scoped>
.attr {
    padding: 10px;
}
</style>